<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云计算在线实践后台管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="css/admin-dashboard.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <!-- 侧边栏 -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <h3>后台管理系统</h3>
            </div>
            <ul class="list-unstyled components">
                <li class="active">
                    <a href="#welcome" data-section="welcome">
                        <i class="fas fa-home"></i> 欢迎页面
                    </a>
                </li>
                <li>
                    <a href="#courseManagement" data-section="courseManagement">
                        <i class="fas fa-book"></i> 课程管理
                    </a>
                </li>
                <li>
                    <a href="#userManagement" data-section="userManagement">
                        <i class="fas fa-users"></i> 用户管理
                    </a>
                </li>
                <li>
                    <a href="#profile" data-section="profile">
                        <i class="fas fa-user"></i> 个人中心
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 页面内容 -->
        <div id="content">
            <!-- 顶部导航栏 -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <button type="button" id="sidebarCollapse" class="btn btn-info">
                        <i class="fas fa-align-left"></i>
                    </button>
                    <div class="welcome-banner">
                        <div class="welcome-text">
                            <h2>欢迎回来，<span id="welcomeUsername"></span></h2>
                            <p>开始您的教学管理工作吧！</p>
                        </div>
                    </div>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="nav navbar-nav ml-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#" id="logoutBtn">
                                    <i class="fas fa-sign-out-alt"></i> 退出登录
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

            <!-- 主要内容区域 -->
            <div class="content-wrapper">
                <!-- 欢迎页面 -->
                <section id="welcome" class="content-section active">
                    <div class="welcome-header">
                        <h1>欢迎使用云计算在线实践平台</h1>
                        <p>开启您的云计算教学之旅</p>
                    </div>
                    <div class="quick-actions">
                        <div class="action-card">
                            <i class="fas fa-book"></i>
                            <h3>课程管理</h3>
                            <p>管理实验课程内容</p>
                            <a href="#courseManagement" class="btn btn-primary">进入管理</a>
                        </div>
                        <div class="action-card">
                            <i class="fas fa-users"></i>
                            <h3>用户管理</h3>
                            <p>管理学生账号信息</p>
                            <a href="#userManagement" class="btn btn-primary">进入管理</a>
                        </div>
                    </div>
                </section>

                <!-- 课程管理页面 -->
                <section id="courseManagement" class="content-section">
                    <div class="section-header">
                        <h2>课程管理</h2>
                        <button class="btn btn-primary" id="addCourseBtn">
                            <i class="fas fa-plus"></i> 添加课程
                        </button>
                    </div>
                    <div class="course-list">
                        <!-- 课程列表将通过JavaScript动态生成 -->
                    </div>
                </section>

                <!-- 用户管理页面 -->
                <section id="userManagement" class="content-section">
                    <div class="section-header">
                        <h2>用户管理</h2>
                        <button class="btn btn-primary" id="addUserBtn">
                            <i class="fas fa-plus"></i> 添加用户
                        </button>
                    </div>
                    <div class="user-list">
                        <!-- 用户列表将通过JavaScript动态生成 -->
                    </div>
                </section>

                <!-- 个人中心页面 -->
                <section id="profile" class="content-section">
                    <div class="profile-header">
                        <h2>个人中心</h2>
                    </div>
                    <div class="profile-content">
                        <div class="profile-info">
                            <div class="info-item">
                                <label>用户名：</label>
                                <span id="profileUsername">root</span>
                            </div>
                            <div class="info-item">
                                <label>邮箱：</label>
                                <span id="profileEmail">admin@example.com</span>
                            </div>
                            <div class="info-item">
                                <label>注册时间：</label>
                                <span id="profileRegisterTime">2024-01-01</span>
                            </div>
                        </div>
                        <div class="profile-actions">
                            <button class="btn btn-primary" id="changePasswordBtn">
                                <i class="fas fa-key"></i> 修改密码
                            </button>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <!-- 课程管理模态框 -->
    <div class="modal fade" id="courseModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">课程信息</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="courseForm">
                        <div class="mb-3">
                            <label for="courseName" class="form-label">课程名称</label>
                            <input type="text" class="form-control" id="courseName" required>
                        </div>
                        <div class="mb-3">
                            <label for="courseDuration" class="form-label">课程时长（小时）</label>
                            <input type="number" class="form-control" id="courseDuration" required>
                        </div>
                        <div class="mb-3">
                            <label for="courseDifficulty" class="form-label">难度等级</label>
                            <select class="form-select" id="courseDifficulty" required>
                                <option value="初级">初级</option>
                                <option value="中级">中级</option>
                                <option value="高级">高级</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="courseDescription" class="form-label">课程描述</label>
                            <textarea class="form-control" id="courseDescription" rows="3" required></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="courseGuide" class="form-label">实验指导书</label>
                            <input type="file" class="form-control" id="courseGuide" accept=".pdf,.doc,.docx">
                        </div>
                        <div class="mb-3">
                            <label for="courseImage" class="form-label">镜像文件</label>
                            <input type="file" class="form-control" id="courseImage" accept=".tar,.gz,.tar.gz,.docker,.zip,.ova">
                            <small class="form-text text-muted">支持的格式：.tar, .gz, .tar.gz, .docker, .zip, .ova（虚拟机镜像）</small>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveCourseBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户管理模态框 -->
    <div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModalLabel">用户信息</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="userForm">
                        <div class="mb-3">
                            <label for="userUsername" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="userUsername" required>
                        </div>
                        <div class="mb-3">
                            <label for="userPassword" class="form-label">密码</label>
                            <input type="password" class="form-control" id="userPassword">
                            <div class="form-text">编辑用户时如不修改密码请留空</div>
                        </div>
                        <div class="mb-3">
                            <label for="userEmail" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="userEmail" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveUserBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改密码模态框 -->
    <div class="modal fade" id="passwordModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">修改密码</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="passwordForm">
                        <div class="mb-3">
                            <label for="oldPassword" class="form-label">原密码</label>
                            <input type="password" class="form-control" id="oldPassword" required>
                        </div>
                        <div class="mb-3">
                            <label for="newPassword" class="form-label">新密码</label>
                            <input type="password" class="form-control" id="newPassword" required>
                        </div>
                        <div class="mb-3">
                            <label for="confirmNewPassword" class="form-label">确认新密码</label>
                            <input type="password" class="form-control" id="confirmNewPassword" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="savePasswordBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/admin-dashboard.js"></script>
</body>
</html> 